<template>
  <view class="game-content">
    <image src="http://web.wddcn.com/wddxcx/dzd/images/game/2p.png" class="tiger_bg" />

    <view class="game-goods-wrap">
      <view class="game-goods-list">
        <view class="game-goods" style="background: #ffffff;">
          <view class="game-goods-box" id="game1">
            <view
              class="game-goods-ul"
              :style="'transition-duration:'+listcss[0].dur+'ms;transform:translate(0px, -'+listcss[0].y+'px) translateZ(0px)'"
            >
              <view
                v-for="(item,index) in list[0].arr"
                :key="index"
                :style="{height:game_list_h+'px'}"
                class="img_item"
                data-type
              >
                <image :src="item.src" class="img" mode="widthFix" />
              </view>
            </view>
          </view>
        </view>

        <view class="game-goods" style="background: #ffffff;">
          <view class="game-goods-box" id="game2">
            <view
              class="game-goods-ul"
              :style="'transition-duration:'+listcss[0].dur+'ms;transform:translate(0px, -'+listcss[1].y+'px) translateZ(0px)'"
            >
              <view
                v-for="(item,index) in list[1].arr"
                :key="index"
                :style="{height:game_list_h+'px'}"
                class="img_item"
                data-type
              >
                <image :src="item.src" class="img" mode="widthFix" />
              </view>
            </view>
          </view>
        </view>

        <view class="game-goods" style="background: #ffffff;">
          <view class="game-goods-box" id="game3">
            <view
              class="game-goods-ul"
              :style="'transition-duration:'+listcss[0].dur+'ms;transform:translate(0px, -'+listcss[2].y+'px) translateZ(0px)'"
            >
              <view
                v-for="(item,index) in list[2].arr"
                class="img_item"
                :key="index"
                :style="{height:game_list_h+'px'}"
                data-type
              >
                <image :src="item.src" class="img" mode="widthFix" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="game-btn" @click="getIndex"></view>
  </view>
</template>
<script>
let ballarr = [
  { src: "https://file02.esurl.cn/public/eggMachine/1.png" },
  { src: "https://file02.esurl.cn/public/eggMachine/2.png" },
  { src: "https://file02.esurl.cn/public/eggMachine/3.png" },
];
let durArr = [
  { dur: 2000, y: 160 },
  { dur: 2000, y: 160 },
  { dur: 2000, y: 200 },
];
let initBall = [
  Math.floor(Math.random() * 3 + 1),
  Math.floor(Math.random() * 3 + 1),
  Math.floor(Math.random() * 3 + 1),
];
let ballRoot = "https://file02.esurl.cn/public/eggMachine/";
export default {
  data() {
    return {
      lastBall: [2, 1, 2], //最后滚动图片链接
      gamelength: 12, //一共生成12*3个
      game_list_h: 40, //每个奖品高度px
      //初始化奖品
      list: [
        {
          arr: [
            { src: ballRoot + "1.png" },
            { src: ballRoot + "1.png" },
            { src: ballRoot + "1.png" },
          ],
        },
        {
          arr: [
            { src: ballRoot + "2.png" },
            { src: ballRoot + "2.png" },
            { src: ballRoot + "2.png" },
          ],
        },
        {
          arr: [
            { src: ballRoot + "3.png" },
            { src: ballRoot + "3.png" },
            { src: ballRoot + "3.png" },
          ],
        },
      ],
      //滚动动画值
      listcss: [
        { dur: 0, y: 0 },
        { dur: 0, y: 0 },
        { dur: 0, y: 0 },
      ],
    };
  },
  mounted() {
    this.createBall();
  },
  methods: {
      getIndex(){
        this.$emit('getIndex')
      },
    start(a,b,c) {
      let y, y1, y2, y3;
      if ((a == b) == c) {
        //中奖y轴滚动位置相同，只需计算1个
        y = (this.gamelength * 3 + a - 1) * 40;
        durArr = [
          { dur: 2000, y: y },
          { dur: 2000, y: y },
          { dur: 2000, y: y },
        ];
        this.listcss = durArr;
      } else {
       
        //不中奖计算每个滚动y轴位置
        y1 = (this.gamelength * 3 + a - 1) * 40;
        y2 = (this.gamelength * 3 + b - 1) * 40;
        y3 = (this.gamelength * 3 + c - 1) * 40;
        durArr = [
          { dur: 2000, y: y1 },
          { dur: 2000, y: y2 },
          { dur: 2000, y: y3 },
        ];
        this.listcss = durArr;
      }
    },
    //创建小球
    createBall() {
      for (let i = 0; i < this.gamelength; i++) {
        let arr1 = this.list[0].arr.concat(ballarr);
        let arr2 = this.list[1].arr.concat(ballarr);
        let arr3 = this.list[2].arr.concat(ballarr);
        this.list = [{ arr: arr1 }, { arr: arr2 }, { arr: arr3 }];
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.game-goods-wrap {
  position: absolute;
  width: 100%;
  height: 80rpx;
  top: 80rpx;
}
.tiger_bg {
  width: 700rpx;
  height: 300rpx;
  display: block;
  margin: 0 auto;
}
.game-content {
  position: relative;
  width: 750rpx;
}
.game-goods-list {
  overflow: hidden;
  width: 380rpx;
  height: 70rpx;
  margin: 0 auto;
  background: LightPink;
  display: flex;
  justify-content: space-around;
}
.game-goods {
  width: 126rpx;
  height: 75rpx;
  overflow: hidden;
}
.img_item{
    text-align: center;
}
.game-goods-ul .img {
  width: 80rpx;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.game-btn {
  width: 260rpx;
  height: 60rpx;
  position: absolute;
  left: 230rpx;
  top: 210rpx;
}
</style>